<template>
  <div id='classify'>
      <HeaderTab></HeaderTab>  
       <yd-scrolltab class="magrtop">
        <yd-scrolltab-panel v-for="(item,index) in listLeft" :key="index" :label="item.name" icon="">
            <div> <img :src="item.banner_url" class='banner' alt=""></div>
             <divider>{{item.front_desc}}</divider>
            <div class="col">
            <div class="col3"></div>
            <div class="col3"></div>
            <div class="col3"></div>
            <div class="col3"></div>
            <div class="col3"></div>
            <div class="col3"></div>
            </div>
        </yd-scrolltab-panel>
        <!-- 空白占位 -->
        
    </yd-scrolltab>
    <!--  <yd-scrolltab>
        <yd-scrolltab-panel label="保健品" icon="">
            <div style="height: 350px;background-color: gray;"></div>
        </yd-scrolltab-panel>

        <yd-scrolltab-panel label="中药" icon="" >
            <div style="height: 350px;background-color: blue;"></div>
        </yd-scrolltab-panel>

        <yd-scrolltab-panel label="合成药" icon="" active>
            <div style="height: 350px;background-color: yellow;"></div>
        </yd-scrolltab-panel>
         <yd-scrolltab-panel label="合成药1" icon="">
            <div style="height: 350px;background-color: blue;"></div>
        </yd-scrolltab-panel>
    </yd-scrolltab> -->
      
   
   <footerTab></footerTab> <!-- 暂时使用 -->
  </div>
</template>

<script>
import Vue from 'vue';
import {ScrollTab, ScrollTabPanel} from 'vue-ydui/dist/lib.px/scrolltab';
import HeaderTab from '@/components/header.vue';
Vue.component(ScrollTab.name, ScrollTab);
Vue.component(ScrollTabPanel.name, ScrollTabPanel);

import { Scroller, Swiper,Divider,Grid, GridItem} from 'vux'
import footerTab from '@/components/footer'
export default {
  components: {
    Scroller,
    Swiper,
    footerTab,
    Divider ,Grid, GridItem,HeaderTab
  },
  methods: {
   CatalogList: async function(){
     const res = await this.http.get(this.api.CatalogList)
            if (res) {  
                this.listLeft=res.data.data.categoryList;
                console.log(this.listLeft)
            } 
   }
  },
  data () {
    return {
        listLeft:[],
     
    }
  },
   mounted:function(){
    this.CatalogList()
  }
}
</script>
<style>
.yd-scrolltab{
    position: fixed;
}
.yd-scrolltab-content{
  height: 92%;
}
.banner{
    width: 100%;
    height:75px;
}
.col{
        width: 100%;
}
.col3{
    width: 31%;
    height:100px;
    border: 1px solid #ccc;
    display: inline-block;
}
.magrtop{
    margin-top: 47px;
}
</style>
